﻿<!DOCTYPE html>
<html>
<head>
    <title>Customer Manager</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/animations.css" rel="stylesheet" />
    <link href="Content/styles.css" rel="stylesheet" />
</head>
<body data-ng-cloak>
    
    <header class="navbar navbar-inner navbar-fixed-top" data-ng-controller="NavbarController as vm">
        <nav class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-ng-click="vm.isCollapsed = !vm.isCollapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#/">
                    <img src="Content/images/people.png" alt="logo">
                    <span class="appTitle">{{ vm.appTitle }}</span>
                </a>
            </div>
            <div class="nav-container" data-collapse="isCollapsed">

                <!-- With menu-highlighter directive -->
                <ul class="nav navbar-nav nav-pills navBarPadding"
                    data-menu-highlighter data-highlight-class-name="active">
                    <li><a href="#/customers">Customers</a></li>
                    <li><a href="#/orders">Orders</a></li>
                    <li><a href="#/about">About</a></li>
                    <li id="nav-login" data-ng-click="vm.loginOrOut()">
                        <!-- href not used but needed to compare against path in menu-highlighter -->
                        <a data-href="#/login">{{ vm.loginLogoutText }}</a>
                    </li>
                </ul>

                <!-- Without menu-highlighter directive -->
                <!--<ul class="nav navbar-nav nav-pills navBarPadding">
                    <li data-ng-class="{'active':highlight('/customers')}"><a href="#/customers">Customers</a></li>
                    <li data-ng-class="{'active':highlight('/orders')}"><a href="#/orders">Orders</a></li>
                    <li data-ng-class="{'active':highlight('/about')}"><a href="#/about">About</a></li>
                    <li data-ng-class="{'active':highlight('/login')}" id="nav-login"
                        data-ng-click="loginOrOut()">
                        <a>{{ loginLogoutText }}</a>
                    </li>
                </ul>-->
            </div>
        </nav>
    </header>

    <div class="slide-animation-container">
        <div data-ng-view id="ng-view" class="slide-animation"></div>
    </div>
    
    <div id="footer">
        <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner footer">
                <div class="container">
                    <footer>
                        <div class="row">
                            <div class="col-md-12">
                                Created by <a href="http://twitter.com/DanWahlin" target="_blank">Dan Wahlin</a>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>

    <div data-wc-overlay data-wc-overlay-delay="300">
        <br /><img src="Content/images/spinner.gif" />&nbsp;&nbsp;Loading
    </div>

    <!-- 3rd party libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.min.js"></script>
    <script src="Scripts/angular-ui-bootstrap.js"></script>
    <script src="Scripts/tweenMax.min.js"></script>

    <script src="app/wc.directives/directives/wcOverlay.js"></script>
    <script src="app/wc.directives/directives/menuHighlighter.js"></script>

    <script src="Scripts/breeze.min.js"></script>
    <script src="Scripts/breeze.angular.js"></script>

    <!-- Load custom scripts via RequireJS -->
    <script src="Scripts/require.js" data-main="Scripts/main"></script>

</body>
</html>